<template>
  <nut-actionsheet :is-visible="isVisible" @close="closeActionSheet">
    <div class="nut-picker" slot="custom" :class="customClassName ? customClassName : null">
      <div class="nut-picker-control">
        <span class="nut-picker-confirm-btn" @click="closeActionSheet">取消</span>
        <div class="nut-picker-title">{{title ? title : ''}}</div>
        <span class="nut-picker-cancel-btn" @click="confirm">确定</span>
      </div>
      <div class="nut-picker-panel">
        <template v-for="(item, index) of listData">
          <jl-picker-slot :ref="`picer-slot-${(index)}`"
                          :default-value="chooseValueData[index]"
                          :is-update="isUpdate"
                          :list-data="item"
                          @chooseItem="chooseItem"
                          :key="index"
                          :key-index="index"
                          :item-key="itemKey"
          ></jl-picker-slot>
        </template>
      </div>
    </div>
  </nut-actionsheet>
</template>
<script>

  export default {
    name: 'jl-picker',
    props: {
      isVisible: {
        type: Boolean,
        default: false
      },
      customClassName: {
        type: String,
        default: null
      },
      title: {
        type: String,
      },
      listData: {
        type: Array,
        default: () => []
      },
      defaultValueData: {
        type: Array,
        default: () => []
      },
      itemKey: {
        type: String,
        default: 'value'
      }
    },
    data() {
      return {
        chooseValueData: [],
        cacheValueData: [],
        isUpdate: false
      };
    },
    watch: {
      'defaultValueData': function () {
        this.chooseValueData = [...this.defaultValueData];
        this.cacheValueData = [...this.defaultValueData];
        this.$emit('confirm', this.cacheValueData);
      }
    },
    methods: {
      updateChooseValue(self, index, value) {
        self.cacheValueData.splice(index, 1, value);
        let ref = `picer-slot-${index}`;
        self.$refs[ref][0].updateTransform(value);
      },

      closeActionSheet() {
        this.isUpdate = !this.isUpdate;
        this.cacheValueData = [...this.chooseValueData];
        this.$emit('close');
        this.$emit('close-update', this, this.chooseValueData);
      },

      confirm() {
        this.$emit('confirm', this.cacheValueData);
        this.chooseValueData = [...this.cacheValueData];
        this.$emit('close');
      },

      chooseItem(value, index) {
        if (this.cacheValueData[index] !== value) {
          this.cacheValueData[index] = value;
          this.$emit('choose', this, index, value, this.cacheValueData);
        }
      }
    },
    created() {
      if (this.defaultValueData && this.defaultValueData.length) {
        this.chooseValueData = [...this.defaultValueData];
      } else {
        let defaultValueData = [];
        this.listData.map((item, index) => {
          defaultValueData.push(item[0]);
        });
        this.chooseValueData = [...defaultValueData];
      }
    }
  }
</script>
